<!--
 * @Author: hua
 * @Date: 2019-02-26 09:08:43
 * @description: 聊天室核心页面
 * @LastEditors: Howard
 * @LastEditTime: 2022-03-09 12:57:50
 -->
<template>
  <div id="msg_empty">
    <!-- 暂无消息 -->
    <!-- <vEmpty v-if="msgList.length==0 && isEmpty"></vEmpty> -->
    <div v-if="menuVisible" class="menu_container" :style="'top:'+menuTop+'px;right:1.4rem'">
       <div>
          <div @click.native="handleCopy">
              <span slot="text">复制</span>
          </div>
          <div @click.native="handleCallBackMsg">
              <span slot="text">撤回</span>
          </div>
          <div @click.native="handleResetSend">
              <span slot="text">重发</span>
          </div>
      </div>
    </div>
    <!-- 历史消息 -->
    <el-dialog
      class="detail-dialog"
      title="历史消息"
      :visible.sync="msgListVisible"
      :close-on-click-modal="false"
    >
      <msgList style="height: 300px;overflow: auto;"></msgList>
    </el-dialog>
    <!-- 详情 -->
    <el-dialog title="详情" :visible.sync="detailsVisible">
      <roomDetails @handleClose="handleDetailsClose" style="height: 300px;overflow: auto;" v-if="detailsVisible"></roomDetails>
    </el-dialog>
    <!-- 内容 -->
    <mescroll-vue :up="mescrollUp" :down="mescrollDown" @init="mescrollInit" @touchstart="closeDefIconsShow()">
      <div class="mscroll-container">
        <div v-show="moreInfoShow" class="more_info" @click="$router.push({name: 'roomMsgList'})">
          更多消息，请<span class="primary_color">打开消息记录</span>
        </div>
        <ul>
          <li v-for="(key, index) in msgList" :key="index">
            <div
              class="format_time"
              v-if="index>0 && key.created_at> parseInt(msgList[index-1].created_at)+60"
            >{{formatTime(key.created_at)}}</div>
            <div class="chat-item" v-if="(key.user_id == userInfo.id) && (key.user_type!=1)">
              <div class="mychat">
                 <!-- 消息送达状态 -->
                <span
                  v-if="key.send_status == LOADING "
                  class="send_status loading_color rotate_loading"
                >
                  <i name="refresh"></i>
                </span>
                <span
                  @click="reSendMsg(key)"
                  v-if="key.send_status == FAIL"
                  class="send_status color_danger"
                >
                  <i name="error"></i>
                </span>
                <vImg :imgUrl="key.head_img" class="img" />
                <div class="nt">
                  <span v-html="key.name"></span>
                </div>
                <div
                  v-if="key.type == RECORD"
                  class="msg"
                  @mousedown="amrPlay(JSON.parse(key.msg), index)"
                >
                  <img
                    class="vioce_start"
                    style="margin-right:-3px"
                    :src="'static/img/voice_left.gif'"
                    v-show="JSON.parse(key.msg)['status']"
                  />
                  <i class="vioce_stop_left" v-show="!JSON.parse(key.msg)['status']"></i>
                  <span class="vioce_second">{{JSON.parse(key.msg)['duration']}}s</span>
                </div>
                <div
                  v-on:click="handleDefsForSelf(key)"
                  v-else-if="key.type == TEXT"
                  class="rawMsg"
                  v-html="key.msg"
                >{{key.msg}}</div>
                <div v-else-if="key.type == IMG" class="rawMsg" v-html="key.msg">{{key.msg}}</div>
                <div
                  v-else-if="key.type == FILE"
                  class="rawMsg"
                  @click="handleDefMsg(key.msg)"
                >[文件]{{formatFileName(key.msg)}}</div>
                <div
                  v-else-if="key.type == RECALL"
                   class="format_recall"
                 
                >{{key.msg}}</div>
                <div v-else class="msg" v-html="key.msg"></div>
                <!-- 消息读取状态键盘输入时更新-->
                <!--  <span class="read_status" v-if="key.send_status == SUCCESS && currentRoomType == 0">
                  <yd-badge v-if="key.read_status == 0">未读</yd-badge>
                  <yd-badge v-else type="primary">已读</yd-badge>
                </span>-->
              </div>
            </div>
            <div class="chat-item" v-else>
              <div class="otherchat">
                <vImg class="img" :imgUrl="key.head_img" />
                <div class="nt">
                  <span v-html="key.name"></span>
                </div>
                <div
                  v-if="key.type == RECORD"
                  class="msg"
                  @mousedown="amrPlay(JSON.parse(key.msg), index)"
                >
                  <img
                    class="chat_right vioce_start"
                    :src="'static/img/voice_right.gif'"
                    v-show="JSON.parse(key.msg)['status']"
                  />
                  <i class="vioce_stop_right" v-show="!JSON.parse(key.msg)['status']"></i>
                  <span class="vioce_second">{{JSON.parse(key.msg)['duration']}}s</span>
                </div>
                <div v-else-if="key.type == TEXT" class="rawMsg" v-html="key.msg"></div>
                <div v-else-if="key.type == IMG" class="rawMsg" v-html="key.msg">{{key.msg}}</div>
                <div
                  v-else-if="key.type == FILE"
                  class="rawMsg"
                  @click="handleDefMsg(key.msg)"
                >[文件]{{formatFileName(key.msg)}}</div>
                <div v-else class="msg" v-html="key.msg"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </mescroll-vue>
    <!-- 语音输入gif图 -->
    <img v-show="recordingShow" class="recording" :src="'static/img/recording.gif'" />
    <!-- 输入     :style="iconsShow || defsShow ?'bottom:200px':'bottom:0rem'"-->
    <inputWrapper
      @handleRecordShow="handleRecordShow"
      @closeDefIconsShow="closeDefIconsShow"
      @handleIconsShow="handleIconsShow"
      @handleDefsShow="handleDefsShow"
      @sendMsg="sendMsg"
      @handleImgOnChange="handleImgOnChange"
      @handleFileOnChange="handleFileOnChange"
      @handleContent="handleContent"
      @handleStartRecord="handleStartRecord"
      @onFocus="handleOnFocus"
      @onBlur="handleOnblur"
      @handleMsgList="msgListVisible=true"
      @handleDetail="detailsVisible=true"
      :recordShow="recordShow"
      :content="content"
      :touched="touched"
      :sendShow="sendShow"
    ></inputWrapper>
    <!-- 表情 -->
    <icons @recInsertIcon="insertIcon" v-if="iconsShow" />
    <!-- 功能栏 -->
    <!-- <def v-show="defsShow" /> -->
    <!-- 裁剪图 -->
    <!-- <cropperBox
      v-if="cropperShow"
      :reqImgData="reqImgData"
      @recReqImgData="recReqImgData"
      @recCropperShow="recCropperShow"
    /> -->
  </div>
</template>
<script>
/* 重新设计输入栏 */
import Vue from 'vue'
import { mapGetters, mapMutations } from 'vuex'
import vImg from '@/components/v-img'
import roomDetails from '@/components/roomDetails'
import vEmpty from '@/components/v-empty/v-empty'
import inputWrapper from './components/input-wrapper/input-wrapper'
import icons from './components/icons/icons'
import def from './components/def/def'
import cropperBox from './components/cropperBox/cropperBox'
import msgList from './msgList'
import MescrollVue from 'mescroll.js/mescroll.vue'
import { uploadFile, uploadBase64 } from '@/socketioApi/common'
import utils from '@/utils/utils'
import { recOpen, recStart, recStop } from '@/utils/recorder'
import storage from '@/utils/localstorage'
import { getLocalRoomMsg } from '@/utils/indexedDB'
import { getCloudRoomMsg } from '@/socketioApi/room'
import { MessageBox, Message } from 'element-ui'
import { send } from '@/utils/socketio'
import { stopVideo, hangUp } from '@/utils/webRtc.js'
import { chatSend, reChatSend } from '@/socketIoApi/chat'
import axios from 'axios'
import lrz from 'lrz'
export default {
  name: 'Room',
  components: {
    MescrollVue,
    vImg,
    icons,
    def,
    cropperBox,
    vEmpty,
    inputWrapper,
    msgList,
    roomDetails
  },
  computed: {
    ...mapGetters([
      'msgList',
      'currentRoomUuid',
      'currentRoomName',
      'currentRoomType',
      'userInfo',
      'htmlFontSize',
      'currentRoomSaveAction',
      'RECORD',
      'RECALL',
      'TEXT',
      /* "RESEND", */
      'IMG',
      'FILE',
      'LOADING',
      'SUCCESS',
      'FAIL',
      'CHAT_VIDEO',
      'LOCAL'
    ])
  },
  data() {
    return {
      menuTop: 0,
      detailsVisible: false,
      msgListVisible: false,
      menuVisible: false,
      currentKey: {},
      uuidVal: '',
      scroll: '',
      content: '',
      isEmpty: true,
      isPartChatPage: false,
      iconsShow: false,
      defsShow: false,
      sendShow: false,
      recordShow: false,
      recordingShow: false,
      touched: false,
      cropperShow: false,
      lockDown: false,
      moreInfoShow: false,
      onFocusLock: false,
      clientHeight: 0,
      data: [],
      reqImgData: {
        url: process.env.VUE_APP_CLIENT_SOCKET,
        imgDatas: ''
      },
      mescroll: null, // mescroll实例对象
      mescrollDom: null,
      mescrollUp: {
        onScroll: this.handleOnScroll
      },
      mescrollDown: {
        callback: this.downCallback,
        page: {
          num: 1, // 当前页 默认0,回调之前会加1; 即callback(page)会从1开始
          size: 10 // 每页数据条数,默认10
        },
        textInOffset: '下拉加载', // 下拉初始文案
        textOutOffset: '释放下拉加载', // 下拉刷新完成文案
        textLoading: '下拉加载中...' // 下拉加载中文案
      }
    }
  },
  created() {},
  mounted() {
    this.init()
  },
  beforeRouteEnter(to, from, next) {
    to.meta.title = to.query.name
    next(vm => {
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter() // 进入路由时,滚动到原来的列表位置,恢复回到顶部按钮和isBounce的配置
    })
  },
  beforeRouteLeave(to, from, next) {
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
    next()
  },
  destroyed() {
    this.$store.commit('updateRoomStatus', false)
    if (Vue.prototype.$preview.self) {
      Vue.prototype.$preview.self.close()
    }
    chatSend({
      data: {
        msg: JSON.stringify({ type: 'end' }),
        room_uuid: this.currentRoomUuid,
        type: this.CHAT_VIDEO,
        save_action: this.LOCAL
      }
    })
    stopVideo()
    hangUp()
    send('leave', { room_uuid: this.currentRoomUuid })
  },
  activated() {
    window.physicsBackRouter = '/home'
  },
  methods: {
    ...mapMutations({
      updateMsgList: 'updateMsgList'
    }),
    init() {
      this.clientHeight = document.body.clientHeight
      this.mescrollDom = document.getElementsByClassName('mescroll')[0]
      this.isPartChatPage = false
      if (window.plus) {
        window.r = plus.audio.getRecorder()
      }
      new Swiper('.swiper-cont', {
        loop: false,
        autoplay: false, // 可选选项，自动滑动
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        observer: true,
        observeParents: true
      })
      this.updateMsgList([])
      this.handleHeightToBottom()
      window.onresize = () => {
        /* const activeElement = document.activeElement
        if (activeElement.tagName === 'DIV') {
          setTimeout(() => {
            activeElement.scrollIntoView(false)
          }, 100)
        } */

        this.isEmpty = false
        if (document.body.clientHeight < this.clientHeight) {
          /* if(this.iconsShow ==true || this.defsShow ==true){
            setTimeout(() => {
              this.isPartChatPage = 'keyborad'
              this.handleHeightToBottom()
              this.handleSendShow();
            }, 50);
          }else{ */
          this.isPartChatPage = 'keyborad'
          this.handleHeightToBottom()
          this.handleSendShow()
          // }
        } else {
          if (this.iconsShow !== true && this.defsShow !== true) {
            this.isPartChatPage = false
          }
          this.handleHeightToBottom()
          this.handleSendShow()
        }
      }
    },
    handleOnScroll() {
      this.menuVisible = false
    },
    handleCallBackMsg() {
      MessageBox.confirm('只能撤回远端记录，确认撤回？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = JSON.parse(JSON.stringify(this.currentKey))
        data['type'] = this.RECALL
        data['msg'] = '您撤回了一条消息'
        this.reSendMsg(data)
        this.menuVisible = false
      }, action => {
        // 取消的回调
        this.menuVisible = false
      })
    },
    handleCopy() {
      this.content = this.currentKey.msg
    },
    handleResetSend() {
      this.menuVisible = false
      this.reSendMsg(this.currentKey)
    },
    handleDefsForSelf(item) {
      console.log(event, item)
      this.menuVisible = true
      this.menuTop = event.clientY
      this.currentKey = item
    },
    handleOnFocus(e) {
      setTimeout(() => {
        e.target.scrollIntoView(true)
        if (!this.onFocusLock) {
          this.onFocusLock = true
          send(
            'input',
            { room_uuid: this.currentRoomUuid, even: 'focus' },
            'broadcast'
          )
          console.log('handleOnFocus')
        }
      }, 300)
    },
    handleOnblur() {
      console.log('handleOnblur')
      this.onFocusLock = false
      send(
        'input',
        { room_uuid: this.currentRoomUuid, even: 'blur' },
        'broadcast'
      )
    },
    handleHeightToBottom() {
      if (this.isPartChatPage == false) {
        this.mescrollDom.style.height =
          document.body.clientHeight - this.htmlFontSize * 2 + 'px'
      } else if (this.isPartChatPage == 'keyborad') {
        this.mescrollDom.style.height =
          document.body.clientHeight - this.htmlFontSize * 2 + 'px'
      } else {
        this.mescrollDom.style.height =
          document.body.clientHeight - this.htmlFontSize * 2 - 200 + 'px'
      }
      this.menuVisible = false
      this.handleMsgListToBottom(100)
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll
    },
    downCallback(mescroll) {
      if (this.mescrollDown.page.num > 1) {
        this.lockDown = true
      }
      if (this.currentRoomSaveAction == 0) {
        getLocalRoomMsg(
          this.currentRoomUuid,
          this.mescrollDown.page.num,
          this.mescrollDown.page.size
        ).then(res => {
          let msgList = JSON.parse(JSON.stringify(this.msgList))
          msgList = res.list.concat(msgList)
          this.updateMsgList(msgList)
          this.$nextTick(() => {
            if (
              (msgList.length > 10 && msgList.length == res.total) ||
              this.mescrollDown.page.num > 3
            ) {
              this.moreInfoShow = true
              mescroll.lockDownScroll(true)
            }
            mescroll.endSuccess() // 结束下拉刷新,无参
            this.$previewRefresh()
            this.mescrollDown.page.num++
          })
        })
      } else if (this.currentRoomSaveAction == 1) {
        getCloudRoomMsg({
          room_uuid: this.currentRoomUuid,
          page_no: this.mescrollDown.page.num,
          per_page: this.mescrollDown.page.size
        }).then(res => {
          let msgList = JSON.parse(JSON.stringify(this.msgList))
          const rawList = res.data.list
          rawList.map(item => {
            item['msg'] = item['formatMsg']
            delete item['formatMsg']
            return item
          })
          msgList = rawList.reverse().concat(msgList)
          this.updateMsgList(msgList)
          this.$nextTick(() => {
            if (
              (msgList.length > 10 && msgList.length == res.data.page.count) ||
              this.mescrollDown.page.num > 3
            ) {
              this.moreInfoShow = true
              mescroll.lockDownScroll(true)
            }
            mescroll.endSuccess() // 结束下拉刷新,无参
            this.$previewRefresh()
            this.mescrollDown.page.num++
          })
        })
      }
    },
    handleFileOnChange(event) {
      const file = event.target.files[0]
      if (file) {
        // 读取本地文件，以gbk编码方式输出
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = e => {
          // Loading.open("上传中...");
          uploadFile({
            dataUrl: e.target.result,
            name: file.name,
            size: file.size,
            type: file.type
          })
            .then(res => {
              const file_path = process.env.VUE_APP_CLIENT_SOCKET + res.data.path
              const file = `<a href='${file_path}' download='${
                res.data.name.split('.')[0]
              }'>${res.data.name.split('.')[0]}[文件]</a>`
              // Loading.close();
              chatSend({
                data: {
                  msg: file,
                  room_uuid: this.currentRoomUuid,
                  type: this.FILE,
                  save_action: this.currentRoomSaveAction
                }
              })
            })
            .catch(e => {
              // Loading.close();
            })
        }
      }
    },
    handleImgOnChange(event) {
      const file = event.target.files[0]
      if (file.type.indexOf('image/') == -1) {
        Message({
          message: '请上传图片!',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      lrz(file, { width: 1080 })
        .then(rst => {
          // 处理成功会执行
          if (rst.filelen > 204800) {
            Message({
              message: '上传图片不能大于2M',
              type: 'error',
              duration: 5 * 1000
            })
          } else {
            this.reqImgData.imgDatas = rst.base64
            uploadBase64(this.reqImgData).then(res => {
              // Loading.close()
              const img = `<img class='chat_img'  preview='1' preview-text='' width='100' src='${process.env.VUE_APP_CLIENT_SOCKET + res.data.path}'>`
              chatSend({
                data: {
                  msg: img,
                  room_uuid: window.room_uuid,
                  room_uuid: this.currentRoomUuid,
                  type: this.IMG,
                  save_action: this.currentRoomSaveAction
                }
              })
            })
          }
          console.log(rst)
        })
        .catch(function(err) {
          // 处理失败会执行
          Message({
            message: err,
            type: 'error',
            duration: 5 * 1000
          })
        })
        .always(function() {
          // 不管是成功失败，都会执行
        })
    },
    // 扩展API加载完毕，现在可以正常调用扩展API
    getCurrentPosition() {
      plus.geolocation.getCurrentPosition(
        function(p) {
          chatSend({
            data: {
              msg: p.addresses,
              room_uuid: this.currentRoomUuid,
              type: this.TEXT,
              save_action: this.currentRoomSaveAction
            }
          })
        },
        function(e) {
          switch (e.code) {
            case e.PERMISSION_DENIED:
              alert('User denied the request for Geolocation.')
              break
            case e.POSITION_UNAVAILABLE:
              alert('Location information is unavailable.')
              break
            case e.TIMEOUT:
              alert('The request to get user location timed out.')
              break
            case e.UNKNOWN_ERROR:
              alert('An unknown error occurred.')
              break
          }
        }
      )
    },
    sendMsg() {
      if (this.content === '') {
        return
      }
      chatSend({
        data: {
          msg: this.content,
          room_uuid: this.currentRoomUuid,
          type: this.TEXT,
          save_action: this.currentRoomSaveAction
        }
      })
      document.getElementById('edit').innerHTML = ''
      this.content = ''
      this.closeDefIconsShow()
      this.$emit('sendMsg')
    },
    reSendMsg(key) {
      reChatSend({
        data: {
          room_uuid: this.currentRoomUuid,
          type: key.type,
          created_at: key.created_at,
          user_id: key.user_id,
          msg: key.msg,
          save_action: this.currentRoomSaveAction
        }
      })
      this.$emit('sendMsg')
    },
    handleContent(value) {
      this.content = value
    },
    handleRecordShow(value) {
      this.recordShow = value
    },
    closeDefIconsShow() {
      this.iconsShow = false
      this.defsShow = false
      this.recordShow = false
      this.isPartChatPage = false
      this.handleHeightToBottom()
    },
    handleSendShow() {
      if (this.content.length >= 1) {
        this.sendShow = true
      } else {
        this.sendShow = false
      }
    },
    /* 回滚到底部并重置预览图片 */
    handleMsgListToBottom(delayTime) {
      this.$nextTick(() => {
        setTimeout(() => {
          if (!this.lockDown) {
            this.mescrollDom.scrollTop = document.getElementsByClassName(
              'mscroll-container'
            )[0].scrollHeight
          }
          this.$previewRefresh()
          this.lockDown = false
        }, delayTime)
      })
    },
    handleDefsShow() {
      // 这边需要解决获取焦点后的再切换表情的bug
      document.getElementsByClassName('edit-div')[0].blur()
      if (this.defsShow) {
        this.isPartChatPage = false
        this.handleHeightToBottom()
      } else {
        this.isPartChatPage = true
        this.handleHeightToBottom()
      }
      this.defsShow = !this.defsShow
      this.iconsShow = false
      this.recordShow = false
      this.handleSendShow()
      if (this.iconsShow == false && this.defsShow == false) {
        this.isPartChatPage = false
        this.handleHeightToBottom()
      }
      this.handleMsgListToBottom(100)
    },
    handleIconsShow() {
      // 这边需要解决获取焦点后的再切换表情的bug
      document.getElementsByClassName('edit-div')[0].blur()
      if (this.iconsShow) {
        this.isPartChatPage = false
        this.handleHeightToBottom()
      } else {
        this.isPartChatPage = true
        this.handleHeightToBottom()
      }
      this.iconsShow = !this.iconsShow
      this.defsShow = false
      this.recordShow = false
      this.handleSendShow()
      if (this.iconsShow == false && this.defsShow == false) {
        this.isPartChatPage = false
        this.handleHeightToBottom()
      }
      this.handleMsgListToBottom(100)
    },
    insertIcon(src) {
      this.content = `${this.content}<img src='${src}'>`
    },
    handleStartRecord() {
      this.defsShow = false
      this.iconsShow = false
      this.recordingShow = true
      this.touched = true
      if (window.plus) {
        if (window.r == null) {
          this.recordingShow = false
          this.touched = false
          return
        }
        window.r.stop()
        window.r.record(
          { filename: '_doc/audio/' },
          p => {
            console.log('录音完成:' + p)
            // 上传
            this.Audio2dataURL(p)
          },
          e => {
            console.log('录音出错', e)
            this.recordingShow = false
            this.touched = false
          }
        )
      } else {
        // 使用H5录音
        recOpen(function() {
          recStart()
        })
      }
    },
    recordStop() {
      const that = this
      recStop(blob => {
        if (blob === false) {
          that.recordingShow = false
          that.touched = false
          Message({
            message: '录音失败!',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
        // name
        const filename =
          this.currentRoomUuid +
          this.userInfo.id +
          new Date().getTime() +
          '.amr'
        // blob转file
        var file = new File([blob], filename, {
          type: 'amr',
          lastModified: Date.now()
        })
        var reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = e => {
          uploadFile({
            dataUrl: e.target.result,
            name: filename,
            size: file.size,
            type: 'amr'
          }).then(res => {
            var BenzAMRRecorder = require('benz-amr-recorder')
            var amr = new BenzAMRRecorder()
            const url = process.env.VUE_APP_CLIENT_SOCKET + res.data.path
            amr
              .initWithUrl(url)
              .then(() => {
                chatSend({
                  data: {
                    msg: JSON.stringify({
                      url: url,
                      duration: amr.getDuration(),
                      status: false
                    }),
                    room_uuid: that.currentRoomUuid,
                    type: that.RECORD,
                    save_action: that.currentRoomSaveAction
                  }
                })
                that.recordingShow = false
                that.touched = false
              })
              .catch(e => {
                console.log(e)
                Message({
                  message: '录音失败!',
                  type: 'error',
                  duration: 5 * 1000
                })
                that.recordingShow = false
                that.touched = false
              })
          })
        }
      })
    },
    /**
     * 录音语音文件转base64字符串
     * @param {Object} path
     */
    Audio2dataURL(path) {
      const that = this
      plus.io.resolveLocalFileSystemURL(path, function(entry) {
        entry.file(
          function(file) {
            var reader = new plus.io.FileReader()
            reader.onloadend = function(e) {
              uploadFile({
                dataUrl: e.target.result,
                name: file.name,
                size: file.size,
                type: file.type
              }).then(res => {
                that.recordingShow = false
                var BenzAMRRecorder = require('benz-amr-recorder')
                var amr = new BenzAMRRecorder()
                const url = process.env.VUE_APP_CLIENT_SOCKET + res.data.path
                amr
                  .initWithUrl(url)
                  .then(function() {
                    chatSend({
                      data: {
                        msg: JSON.stringify({
                          url: url,
                          duration: amr.getDuration(),
                          status: false
                        }),
                        room_uuid: that.currentRoomUuid,
                        type: that.RECORD,
                        save_action: that.currentRoomSaveAction
                      }
                    })
                  })
                  .catch(e => {
                    console.log(e)
                  })
              })
            }
            reader.readAsDataURL(file)
          },
          function(e) {
            console.log('读写出现异常: ' + e.message)
          }
        )
      })
    },
    amrPlay(rawData, index) {
      const that = this
      const data = JSON.parse(JSON.stringify(rawData))
      const msgList = JSON.parse(JSON.stringify(this.msgList))
      data['status'] = true
      msgList[index]['msg'] = JSON.stringify(data)
      this.updateMsgList(msgList)
      var BenzAMRRecorder = require('benz-amr-recorder')
      var amr = new BenzAMRRecorder()
      amr.initWithUrl(data.url).then(function() {
        amr.play()
      })
      amr.onEnded(() => {
        const data = JSON.parse(JSON.stringify(rawData))
        const msgList = JSON.parse(JSON.stringify(this.msgList))
        data['status'] = false
        msgList[index]['msg'] = JSON.stringify(data)
        this.updateMsgList(msgList)
      })
    },
    recReqImgData(value) {
      this.reqImgData.imgDatas = value
    },
    recCropperShow(value) {
      this.cropperShow = value
    },
    formatTime(value) {
      return utils.time.formatDate(value, 'yyyy-MM-dd hh:mm:ss')
    },
    formatFileName(msg) {
      try {
        if (msg) {
          var pat = /href='(.+?)'/
          const url = pat.exec(msg)[1]
          return url.split('uploads/')[1]
        }
      } catch (e) {
        return '解析错误'
      }
    },
    handleDefMsg(msg) {
      if (msg.indexOf('download') != -1) {
        var pat = /href='(.+?)'/
        const url = pat.exec(msg)[1]
        axios({
          method: 'get',
          url: url,
          timeout: 3000,
          headers: {},
          responseType: 'blob'
        })
          .then(res => {
            const blob = new Blob([res.data]) // 处理文档流
            const fileName = url.split('uploads/')[1]
            const elink = document.createElement('a')
            elink.download = fileName
            elink.style.display = 'none'
            elink.href = URL.createObjectURL(blob)
            document.body.appendChild(elink)
            elink.click()
            URL.revokeObjectURL(elink.href) // 释放URL 对象
            document.body.removeChild(elink)
          })
          .catch(res => {
            console.log(res)
          })
      }
    },
    handleDetailsClose() {
      this.$emit('handleInIt')
      this.detailsVisible = false
    }
  },
  watch: {
    // 监听聊天数据变动
    content: 'handleSendShow',
    data: 'handleSendShow',
    msgList: {
      handler(newValue, oldValue) {
        if (newValue.length !== oldValue.length) {
          this.handleMsgListToBottom(100)
        }
      }
    },
    recordShow(newVal, oldVal) {
      if (!newVal) {
        if (window.plus) {
          window.r.stop()
        }
        this.recordStop()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./scss/room";
</style>